<template>
	<view style="padding-bottom: 200rpx;">
		<!-- 顶部栏位 -->
		<fui-nav-bar  isFixed isOccupy custom :background="'#f7f7f7'">
			<sn-header :pageUrl="'/pages/owners/index'"></sn-header>
		</fui-nav-bar>
		<view class="u-flex owners-menu-list" v-if="showMenuList.length !==0">
			<view class="owners-menu-item" v-for="item in showMenuList" :key="$u.guid()"
			 @tap="openPageFn(item.route)">
				<image :src="item.image" mode="" class="owners-menu-image"></image>
				<view class="owners-menu-text">
					{{item.name}}
				</view>
			</view>
		</view>
			<view v-else style="height: 500rpx;flex-direction: column;" class="u-flex u-row-center" >
				<image src="/static/mendian/shoouhou_kong.png" mode="widthFix" style="width: 500rpx;"></image>
				<view style="color: #ff551a;">您没有任何品牌权限~</view>
			</view>
		<view v-if="isMyReport" class="owners-header-container u-flex u-m-35">
			<view class="owners-header-mark"></view>
			<view class="u-font-36" style="font-weight: bold;">报表</view>
		</view>
		<!-- charts区域 -->
		
		<view v-if="isMyReport" class="chart bottom-speac box-padding  " style="position: relative;">
			<view class="u-flex u-row-between u-m-b-28">
				<view class="u-font-36" style="font-weight: bold;">
					成交销售额
				</view>
				<view class="u-flex u-row-between">
					<view :class="['canvas-text',{'canvas-text-active':salesDateArea==2}]" @click="salesDateArea = 2">周</view>
					<view :class="['canvas-text',{'canvas-text-active':salesDateArea==3}]"  @click="salesDateArea = 3">月</view>
					<!-- <view :class="['canvas-text',{'canvas-text-active':salesDateArea==4}]"  @click="salesDateArea = 4">季</view> -->
				</view>
			</view>
			<charts :sales-data="salesData"   :current="0"/>
			<view style="position: absolute;bottom: 35rpx;">
				<!-- <text style="font-size: 18rpx;color: #999999;">(元)</text> -->
			</view>
		</view>
		<view v-if="isMyReport" class="chart bottom-speac box-padding" style="position: relative;">
			<view class="u-flex u-row-between u-m-b-28">
				<view class="u-font-36" style="font-weight: bold;">
					单品销售额
				</view>
				<view class="u-flex u-row-between">
					<view :class="['canvas-text',{'canvas-text-active':salesOnlyDateArea==2}]" @click="salesOnlyDateArea = 2">周</view>
					<view :class="['canvas-text',{'canvas-text-active':salesOnlyDateArea==3}]"  @click="salesOnlyDateArea = 3">月</view>
					<!-- <view :class="['canvas-text',{'canvas-text-active':salesDateArea==4}]"  @click="salesDateArea = 4">季</view> -->
				</view>
			</view>
			<qiun-data-charts
			  type="column"
			  :chartData="productData"
				:opts="copts"
			  background="none"
			          :animation="animation"
					  :loadingType="4"
			/>
			<view class="u-flex u-row-center u-m-t-20" style="flex-wrap: wrap;">
				<view class="legend-item" :style="item.isShow?{'borderColor':item.color,color:item.color}:{}" @click="tapLegendFn(index)" v-for="(item,index) in lagendData" :key="index">{{item.name}}</view>
			</view>
			<view style="position: absolute;bottom: 35rpx;">
				<!-- <text style="font-size: 18rpx;color: #999999;">(元)</text> -->
			</view>
			
		</view>
		<!-- 合约关系区域 -->
		<!-- <view class="owners-header-container u-flex u-m-35">
			<view class="owners-header-mark"></view>
			<view class="u-font-36" style="font-weight: bold;">合约关系</view>
		</view>
		< <contarct-list></contarct-list> -->
		<!-- tabbar -->
		<fui-tabbar :isFixed="true" ></fui-tabbar>
		<!-- <u-tabbar v-if="tabbarShow" :height="100" :list="tabbar" :key="reloadKey" :active-color="textColor" :inactive-color="textColor"></u-tabbar> -->
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import HeaderXiaoxi from '@/components/header-xiaoxi/index.vue'
	import Charts from './echarts/index.vue'
	import ContarctList from './compontents/contractList.vue'
	import {useUserStore} from '@/store/user.js';
	import {useShopStore} from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		components: { Charts, HeaderXiaoxi,ContarctList },
		data() {
			let item = {
				name: 123
			}
			return {
				tabbarShow: false,
				dropDown: false,
				salesData: {
					categories: [],
					series: []
				},
				salesDateArea:3,
				salesOnlyDateArea:3,
				productData:{
				  categories: [],
					series: []
				},
				animation:true,
				lagendData:[],
				copts: {
					update:true, 
					color: ['#666666', '#FFBB1A', '#FF551A'],
					dataLabel: false,
					fontColor: '#999999',
					fontSize: 11,
					yAxis: {
						disableGrid: false,
						gridColor: '#eeeeee',
					},
					legend: {
						float: 'center',
						show:false,
					},
					extra: {
						column: {
							width: 5,
							barBorderCircle: true,
							seriesGap: 6,
							categoryGap: 8,
							linearType: "custom",
							// colorStop: 1,
							// customColor: ['#FFEA00', '#FC0C29', '#CDCDCD']
							customColor: ['#666666', '#FFBB1A', '#FF551A']
						},
					}
				},
				menuList:
					[
					{
						name:'商品',
						image:'/static/owners/shangpin.png',
						isShow:this.isProduct,
						route:'/pages/owners/productMange/index',
					},
					
					{
						name:'分类',
						image:'/static/owners/fenlei.png',
						isShow:this.isCategory,
						route:'/pages/sale/classManger/index?type=BrandOwner',
					},
					{
						name:'品牌',
						image:'/static/owners/pinpai.png',
						isShow:this.isBrand,
						route:'/pages/owners/brandMange/index',
					},
					{
						name:'级别',
						image:'/static/owners/jibie.png',
						isShow:this.isShopLevel,
						route:'/pages/owners/levelMange/index',
					},
					{
						name:'价格',
						image:'/static/owners/jiage.png',
						isShow:this.isPrice,
						route:'/pages/owners/priceMange/index',
					},
					{
						name:'我的签约',
						image:'/static/owners/wodeqianyue.png',
						isShow:this.isContract,
						route:'/pages/owners/contractMange/index',
					},
					// {
					// 	name:'我的报表',
					// 	image:'/static/owners/myReport.png',
					// 	isShow:this.$store.getters['user/isMyReport'],
					// 	route:'/pages/owners/myReport/index',
					// },
					{
						name:'关单卫检',
						image:'/static/owners/bill.png',
						isShow:this.isBillOfEntry,
						route:'/pages/owners/billofEntryMange/index',
					},
					// {
					// 	name:'邀请入驻',
					// 	image:'/static/owners/yaoqingruzhu.png',
					// 	isShow:this.$store.getters['user/isMyReport'],
					// 	route:'/pages/owners/Invite/index',
					// },
					{
						name:'红包明细',
						image:'/static/owners/redpackage.png',
						isShow:this.isSearchHongBao,
						route:'/pages/owners/balanceDetails/index',
					},
					],
				reloadKey:'reload-owner-tabbar-guid'
			}
		},
		watch:{
			salesDateArea(){
				this.getSalesDataFn();
			},
			salesOnlyDateArea(){
				this.getOnlySalesDataFn();
			}
		},
		computed:{
			showMenuList:function(){
				return this.menuList.filter(item=>{
					return item.isShow
				})
			},
			...mapState(useUserStore,['isProduct','isCategory','isBrand','isShopLevel','isPrice','isContract','isBillOfEntry','isSearchHongBao','isMyReport']),
			...mapState(useShopStore, {
				  storeShop: 'shop',
				  dropDownShopList(store){
					  const res = store.shopList
					  if (!res) return
					  let arr = []
					  for (let i = 0; i < res.length; i++) {
						arr.push({
							label: res[i].name,
							value: res[i].id
						})
					  }
					  console.log(arr);
					  return arr
				  }
				  }),
		},
		async onShow() {
			uni.hideTabBar()
			this.menuList[0].isShow = this.isProduct;
			this.menuList[1].isShow = this.isCategory;
			this.menuList[2].isShow = this.isBrand;
			this.menuList[3].isShow = this.isShopLevel;
			this.menuList[4].isShow = this.isPrice;
			this.menuList[5].isShow = this.isContract;
			this.menuList[6].isShow = this.isBillOfEntry;
			this.menuList[7].isShow = this.isSearchHongBao;
			// if(this.$store.state.common.reloadTabbar['owner']){
			// 	this.reloadKey = this.$u.guid(16);
			// 	this.$store.commit('common/CLOSE_TABBAR_STATUS','owner');
			// }
		},
		async onLoad() {
			// 获取销售额月度走势
			if(this.isMyReport){
				await this.getSalesDataFn()
				await this.getOnlySalesDataFn()
			}
		},
		methods: {
			openPageFn(route){
				console.log(route);
				this.$mRouter.push({ route: route })
			},
			// 获取月度走势
			async getSalesDataFn() {
				let params = {
					Dimensionality:this.salesDateArea,
					IncludeUnpaid:true
				}
				const res = await this.$newHttp.get('api/BrandOwnerSalesman/GetAmountOfSalesBySalesman', { params: params });
				let monthX = [];
				let monthY = [];
				if(res.code == 200){
					res.data.amountOfSalesDetails.forEach(item=>{
						monthX.push(item.dimensionValueDescription);
						monthY.push(item.amount)
					})
				}
				this.salesData.categories = monthX;
				this.salesData.series = [{ "name": "销售额", "data": monthY }];
			},
			// 获取月度走势
			async getOnlySalesDataFn() {
				let params = {
					Dimensionality:this.salesOnlyDateArea,
					IncludeUnpaid:true
				}
				const res = await this.$newHttp.get('api/BrandOwnerSalesman/GetItemSalesVolumeBySalesman', { params: params });
				let ruleData = [];
				let monthX = [];
				let colorAry=['#666666', '#FFBB1A', '#FF551A'];
				if(res.code == 200){
					if(res.data.details.length!==0){
						res.data.details.forEach((item,index)=>{
							ruleData.push({
								'name':item.targetName,
								'data':this.dataInitFn(item.datas,true),
								color:colorAry[index],
								isShow:true
							})
							
						})
						monthX = this.dataInitFn(res.data.details[0].datas,false)
					}
				}
				this.productData.categories = monthX;
				this.productData.series = ruleData;
				this.lagendData = ruleData;
			},
			dataInitFn(ary=[],type){
				let resultData = [];
				let resultDate = [];
				ary.forEach(item =>{
					resultData.push(item.amount);
					resultDate.push(item.dimensionValueDescription);
				});
				return type?resultData:resultDate
			},
			tapLegendFn(index){
				
				 //注意这里关闭了加载动画，不然点击图例会执行动画效果
				      this.animation = false;
				      this.lagendData[index].isShow = !this.lagendData[index].isShow;
				      
				      const chartData = this.lagendData.filter(item=>item.isShow);
					  if(chartData.length == 0){
						  this.lagendData[index].isShow = !this.lagendData[index].isShow;
						  return false;
					  }
				      // 这里可以看出，只需要动态改变chartData.series.data.show（饼图类）chartData.series.show（其他图）即可动态改变图形显示与隐藏
				      this.productData.series = JSON.parse(JSON.stringify(chartData));
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.owners-menu-list{
		width: 100%;
		box-sizing: border-box;
		padding-top: 10rpx;
		flex-wrap: wrap;
		padding-bottom: 40rpx;
		.owners-menu-item{
			box-sizing: border-box;
			padding-top: 40rpx;
			// padding-bottom: 40rpx;
			width: 25%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			flex-direction: column;
			.owners-menu-image{
				width: 110rpx;
				height: 110rpx;
			}
			.owners-menu-text{
				width: 100%;
				font-weight: bold;
				margin-top: 20rpx;
				text-align: center;
			}
		}
		
	}
	.owners-header-container{
		.owners-header-mark{
			height: 28rpx;
			width: 10rpx;
			background: #FF551A;
			border-radius: 5rpx;
			margin-right: 10rpx;
		}
	}
	.chart {
		// height: 440rpx;
		background-color: #FFFFFF;
		.canvas-text{
			border: 2px solid #999999;
			color: #999999;
			box-sizing: border-box;
			padding: 0 5rpx;
			border-radius: 6rpx;
			margin: 0 16rpx;
		}
		.canvas-text-active{
			color: #FF551A;
			border-color: #FF551A;
		}
		.legend-item{
			border:1px solid #ccc;
			box-sizing: border-box;
			padding: 4rpx 12rpx;
			color: #999;
			border-radius: 10rpx;
			margin:0 10rpx 14rpx 10rpx;
		}
	}
	.sale-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sale-icons {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	::v-deep .u-dropdown__menu__item__text {
		font-weight: bold;
	}
	::v-deep .u-dropdown__menu__item {
		justify-content: flex-start;
	}
	
</style>